<script setup>
import { onMounted, onUnmounted, ref, computed } from 'vue'
import {
  showToast,
  Popup,
  Icon,
  showConfirmDialog,
  showLoadingToast,
  closeToast,
  showDialog,
} from 'vant'
import Toast from '@/components/toast/index'
import { useRoute, useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { formatTime, getRemaining } from '@/utils/time'
import sixPwdModal from '@/components/pwd/sixPwdModal.vue'
import commonModel from '@/http/modules/common.js'
import { refreshStore } from '@/store/refresh'
import { enumStore } from '@/store/enum'
import { userStore } from '@/store/user'
import Utility from '@/utils/utility'
const store = userStore()
const { userInfo } = storeToRefs(store)
const BIZPRODUCTCODE = '10217'
const outTradeNo = () =>
  `${new Date().getTime()}${parseInt(Math.random() * 1000000)}`
let isSubmit = false
let rateToken = ''
let applyToken = ''
let showPwdModalT = false //全局变量
const isFullPayment = ref(false) //是否全额付款
const route = useRoute()
const router = useRouter()
const refresh = refreshStore()
const { disabled } = storeToRefs(refresh)
const showcoinTypePopup = ref(false) // 是否展示币种选择框
const showCouponPopup = ref(false) // 是否展示优惠券展示框
const rmbPrice = ref('') // 人命币到账金额
const fcPrice = ref('') // 外币付款金额
const smsCode = ref('') // 短信验证码
const smsCountDown = ref(60) // 短信倒计时
const feeCountDown = ref(0) // 汇率倒计时
const getCalcFeeSuccess = ref(false) //算费成功标识
const amountNotEnoughFlag = ref(false) // 余额不足标识
const requesting = ref(false) // 是否请求中
let feeTimeout = null
let smsTimeout = null
const selectCoin = ref({}) // 选中的币种信息
const accountInfo = ref({}) //账户信息
const exchangeInfo = ref({ lockChargeRate: {} }) // 汇率信息
const pwdClear = ref(false)
const rateTips = ref('') //汇率固定提醒
const couponList = ref([]) // 获取的优惠券列表
const disableCoupinList = ref([]) //未到使用时间的优惠券
const couponInfo = ref({}) // 选中的优惠券信息
const couponIndex = ref('') // 选中的优惠券下标
const enum_store = enumStore()
const { enumDslInfo } = storeToRefs(enum_store)
// 余下信息是否展示
const extraInfoShow = computed(() => {
  // 选择了付款类型 rmb金额 货币类型
  if (isFullPayment.value) {
    return (
      selectCoin.value.currencyId &&
      fcPrice.value &&
      getCalcFeeSuccess.value &&
      !amountNotEnoughFlag.value
    )
  } else {
    return (
      selectCoin.value.currencyId &&
      rmbPrice.value &&
      getCalcFeeSuccess.value &&
      !amountNotEnoughFlag.value
    )
  }
})
// 支持付款
const isSupportPay = computed(() => {
  if (isFullPayment.value) {
    return (
      selectCoin.value.currencyId && fcPrice.value && smsCode.value.length === 6
    )
  } else {
    return (
      selectCoin.value.currencyId &&
      rmbPrice.value &&
      smsCode.value.length === 6
    )
  }
})
function getRateNotice() {
  commonModel
    .gatewayApi({
      service: 'cb_get_exchange_rate_notice',
      bizContent: {},
      version: '1.0.0',
    })
    .then((result) => {
      if (result) {
        rateTips.value = result.rateTips
        if (result.notice) {
          showDialog({
            width: '3.4rem',
            title: '温馨提示',
            message: result.notice,
            confirmButtonText: '我已知悉',
          })
        }
      }
    })
}
onMounted(() => {
  getRateNotice()
  getSupplierInfo() // 获取收款账户
})
function getSupplierInfo() {
  commonModel
    .gatewayApi({
      service: 'cb_supplier_pay_init',
      bizContent: {
        supplierId: route.params.id,
      },
      version: '1.0.0',
    })
    .then((result) => {
      if (result) {
        accountInfo.value = result
      }
    })
}

function refreshAccountInfo() {
  commonModel
    .gatewayApi({
      bizContent: {
        token: sessionStorage.token,
      },
      service: 'cb_account_list_query',
      version: '1.0.0',
    })
    .then((res) => {
      if (res) {
        userInfo.value = res
      }
    })
}

// 六位密码输入完成
function onpwdFinish() {
  pwdClear.value = true
  showPwdModalT = false
  let pwdObj = window.PassGlobalSix.payPassguard || {}
  if (pwdObj.getLength() === 0) {
    showToast('请输入交易密码')
    return
  }
  commonModel
    .gatewayApi({
      service: 'cb_supplier_pay_confirm',
      bizContent: {
        applyToken,
        password: pwdObj.getOutputSM(),
        rateToken,
        randomKey: sessionStorage.randKey,
        calculateCheckData: {
          serviceChargeAmount: exchangeInfo.value.serviceChargeAmount,
          origServiceChargeAmount: exchangeInfo.value.origServiceChargeAmount,
          serviceChargeDiscountAmount:
            exchangeInfo.value.serviceChargeDiscountAmount,
          realReceiptAmount: exchangeInfo.value.realReceiptAmount,
          realForeignAmount: exchangeInfo.value.realForeignAmount,
        },
      },
      version: '1.0.0',
    })
    .then((result) => {
      pwdClear.value = false //唤起pwd组建watch钩子
      if (result) {
        const { status } = result
        if (status === 'P' || status === 'F') {
          doResult(result)
        } else {
          doProcess(result)
        }
        //刷新一下store账户信息
        refreshAccountInfo()
      }
    })
    .catch(() => {
      showPwdModalT = false
      pwdClear.value = false //唤起pwd组建watch钩子
      showConfirmDialog({
        title: '付款申请失败',
        confirmButtonText: '确定',
        message: `付款处理失败，请重新发起`,
        showCancelButton: false,
      }).then(() => {
        applyToken = ''
        handleCalc()
        isSubmit = true
      })
    })
}
function doResult(result) {
  const commonToast = {
    showCancel: false,
  }
  if (result.status === 'P') {
    Toast.open({
      ...commonToast,
      confirmFun: () => {
        router.push('/')
        Toast.close()
      },
      closeFun: () => {
        router.push('/')
        Toast.close()
      },
      title: '付款申请成功',
      content: '付款申请成功，我们将短信通知您结果',
    })
  } else {
    Toast.open({
      ...commonToast,
      confirmFun: () => {
        applyToken = ''
        isSubmit = true
        Toast.close()
        handleCalc()
      },
      closeFun: () => {
        applyToken = ''
        isSubmit = true
        Toast.close()
        handleCalc()
      },
      type: 'fail',
      title: '付款申请失败',
      content: `原因：${result.message}`,
    })
  }
}
function doProcess(result) {
  showConfirmDialog({
    confirmButtonText: '重试',
    cancelButtonText: '忘记密码',
    message: result.message,
    // showCancelButton: false,
  })
    .then(() => {
      showPwdModalT = true
    })
    .catch(() => {
      const token = sessionStorage.token
      window.location.href = `${
        import.meta.env.VITE_KYC_URL
      }/cross/chooseVerify?token=${token}&returl=${escape(
        window.location.href
      )}&returnUrl=${escape(window.location.href)}`
      // showPwdModalT = true
    })
}
function handleBlur() {
  if (rmbPrice.value) {
    rmbPrice.value = +rmbPrice.value
      .toString()
      .replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
    handleCalc()
  }
}

// 切换付款方式
function switchPayType() {
  isFullPayment.value = !isFullPayment.value
  resetSetting()
}
function resetSetting() {
  getCalcFeeSuccess.value = false
  rmbPrice.value = ''
  fcPrice.value = ''
  selectCoin.value = {}
  exchangeInfo.value = {}
  couponList.value = [] // 获取的优惠券列表
  disableCoupinList.value = []
  couponInfo.value = {} // 选中的优惠券信息
  couponIndex.value = '' // 选中的优惠券下标
  smsCode.value = '' // 短信验证码
  smsCountDown.value = 60 // 短信倒计时
  feeCountDown.value = 0 // 汇率倒计时
  clearTimeout(feeTimeout)
  clearTimeout(smsTimeout)
}
// 切换币种
function switchCoinType(item) {
  if (isFullPayment.value) {
    fcPrice.value = item.balanceAmount
  }
  selectCoin.value = { ...item, currencyId: item.currency }
  showcoinTypePopup.value = false
  handleCalc()
}
// 获取付款方式接口相关参数
function getPayTypeData() {
  return !isFullPayment.value
    ? { fullPayment: false, rmbAmount: rmbPrice.value }
    : { fullPayment: true, foreignAmount: fcPrice.value }
}
// 计算费率
function handleCalc(useCoupon = false) {
  if (!selectCoin.value.currencyId) {
    //  未选择币种
    console.log('未选择外币！！')
    return
  }
  if (!isFullPayment.value && !rmbPrice.value) {
    //  部分付款需要填写人民币
    console.log('部分付款需要填写人民币')
    return
  }
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    loadingType: 'spinner',
  })
  requesting.value = true
  const _data = getPayTypeData()
  commonModel
    .gatewayApi({
      service: 'cb_supplier_calculate_fee',
      bizContent: {
        ..._data,
        payeeId: route.params.id,
        bizProductCode: BIZPRODUCTCODE,
        bankCardId: accountInfo.value.payeeCardList[0].bankCardNo,
        couponSn: couponInfo.value.couponSn,
        foreignCurrency: selectCoin.value.currencyId,
      },
      version: '1.0.0',
    })
    .then((result) => {
      if (result) {
        if (result.bizSuccess) {
          feeCountDown.value = result.lockChargeRate.validSeconds
          exchangeInfo.value = result
          getCalcFeeSuccess.value = true
          amountNotEnoughFlag.value = false
          rateToken = result.lockChargeRate.rateToken
          closeToast()
          if (isFullPayment.value) {
            //  全额付款 回填rmb金额
          } else {
            // 部分付款 回填fc金额
            fcPrice.value = result.realForeignAmount
          }
          if (!result.discountCalculateResult) {
            showToast('当前选中优惠券不可使用，请重新选择！')
            couponInfo.value = {}
            couponIndex.value = ''
          }
          hanldeFeeCountDown()
          if (!useCoupon) {
            // 未选择优惠券需要刷新优惠券
            getCoupon()
          }
          requesting.value = false
        } else {
          amountNotEnoughFlag.value = true
        }
      } else {
        exchangeInfo.value = {}
        getCalcFeeSuccess.value = false
        console.log('算费处理失败')
      }
    })
    .catch(() => {
      resetSetting()
    })
}
// 开始费率倒计时
function hanldeFeeCountDown() {
  if (feeCountDown.value > 1) {
    feeCountDown.value--
    clearTimeout(feeTimeout)
    feeTimeout = setTimeout(() => {
      hanldeFeeCountDown()
    }, 1000)
  } else {
    // 获取获取费率
    handleCalc()
  }
}
// 开启短信倒计时
function hanldeSmsCountDown() {
  if (smsCountDown.value > 1) {
    smsCountDown.value--
    clearTimeout(smsTimeout)
    smsTimeout = setTimeout(() => {
      hanldeSmsCountDown()
    }, 1000)
  } else {
    smsCountDown.value = 60
  }
}
// 显示优惠券列表
function hanldeShowCoupon() {
  if (couponList.value.length && smsCountDown.value === 60) {
    showCouponPopup.value = true
    disabled.value = true
  }
}
// 获取优惠券
function getCoupon() {
  commonModel
    .gatewayApi({
      service: 'cb_coupon_list_query',
      bizContent: {
        currency: selectCoin.value.currencyId,
        amount: isFullPayment.value ? fcPrice.value : rmbPrice.value,
        origFeeAmount: exchangeInfo.value.origServiceChargeAmount,
        pageNo: 1,
        channelCode: 30200,
        pageSize: 100,
      },
      version: '1.0.0',
    })
    .then((res) => {
      if (res && res.length > 0) {
        // 如果当前选中的优惠券不在优惠券列表中需要清空此优惠券
        if (
          couponInfo.value.couponSn &&
          !res.find((v) => v.couponSn === couponInfo.value.couponSn)
        ) {
          couponInfo.value = {}
        }

        let useableList = [],
          unuseableList = []
        res.map((item) => {
          if (item.usable === 'false') {
            unuseableList.push(item)
          } else {
            useableList.push(item)
          }
        })
        couponList.value = useableList //可使用卡券列表
        disableCoupinList.value = unuseableList //未到使用时间的券列表
      }
    })
}
//
function couponSelectProcess() {
  // 有优惠券未选择优惠券
  if (couponList.value.length && !couponInfo.value.couponSn) {
    showConfirmDialog({
      confirmButtonText: '使用',
      cancelButtonText: '不使用',
      message: '您未选择优惠券，请确认是否需要使用优惠券',
    })
      .then(() => {
        showCouponPopup.value = true
      })
      .catch(() => {
        hanldeApply()
      })
  } else {
    hanldeApply()
  }
}
// 付款申请
function hanldeApply() {
  const _data = getPayTypeData()
  commonModel
    .gatewayApi({
      service: 'cb_supplier_pay_apply',
      bizContent: {
        ..._data,
        payeeId: route.params.id,
        bizProductCode: BIZPRODUCTCODE,
        bankCardId: accountInfo.value.payeeCardList[0].bankCardNo,
        couponSn: couponInfo.value.couponSn,
        foreignCurrency: selectCoin.value.currencyId,
        outTradeNo: outTradeNo(),
        source: sessionStorage.source || '',
      },
      version: '1.0.0',
    })
    .then((result) => {
      if (result && result.applyToken) {
        applyToken = result.applyToken
        hanldeSmsCountDown()
        showToast('短信发送成功！')
      } else {
        console.log('短信报错')
      }
    })
}
// 付款确认
function hanldeConfirm() {
  if (!applyToken) {
    if (isSubmit) {
      showToast('请重新获取验证码！')
      return
    } else {
      showToast('请先获取验证码！')
      return
    }
  }
  if (feeCountDown.value <= 8) {
    showToast(
      '汇率即将超时，请等待汇率自动刷新，确认新汇率后再重新获取验证码，发起立即付款；'
    )
    return
  }
  commonModel
    .gatewayApi({
      service: 'cb_message_verify',
      bizContent: {
        token: applyToken,
        verifyCode: smsCode.value,
      },
      version: '1.0.0',
    })
    .then((result) => {
      if (result) {
        showPwdModalT = true
      }
    })
}

onUnmounted(() => {
  clearTimeout(feeTimeout)
  clearTimeout(smsTimeout)
})

function handleClose() {
  disabled.value = false
}
// 选择优惠券
function handleSelectCoupon(item, index) {
  // 优惠券选择取反
  if (couponIndex.value === index) {
    couponIndex.value = ''
    couponInfo.value = {}
    handleCalc()
  } else {
    couponIndex.value = index
    couponInfo.value = item
    showCouponPopup.value = false
    handleCalc(true)
  }
}
function showTips() {
  showToast('账户可用余额全部付款，手续费从付款金额中扣收')
}
function selectCoinHandle() {
  if (smsCountDown.value === 60) {
    if (accountInfo.value.accountInfoList) {
      if (
        accountInfo.value.accountInfoList.length &&
        accountInfo.value.accountInfoList.some((v) => v.balanceAmount > 0)
      ) {
        showcoinTypePopup.value = true
      } else {
        showToast('当前账户余额不足')
      }
    } else {
      showToast('当前账户余额不足')
    }
  }
}
</script>

<template>
  <div class="collection-account pay-common">
    <p class="col-ac-t">收款账户</p>
    <p class="col-ac-c">{{ accountInfo.supplierMemberName }}</p>
    <p class="col-ac-b">
      {{
        accountInfo.payeeCardList &&
        `${accountInfo.payeeCardList[0].bankName}（${accountInfo.payeeCardList[0].bankCardNo}）`
      }}
    </p>
  </div>
  <div class="withdraw-price pay-common">
    <div class="rmb-pay" v-if="!isFullPayment">
      <p class="rmb-pay-t">人民币付款金额</p>
      <div class="input-box">
        <input
          class="rmb-input"
          v-model="rmbPrice"
          type="number"
          maxlength="15"
          placeholder="0.00"
          :disabled="smsCountDown !== 60 || isFullPayment"
          @blur="handleBlur"
        />
        <span class="rmb-pay-r">CNY</span>
      </div>
    </div>
    <div class="other-pay">
      <p class="fc-pay-t">
        <span>请选择付款币种</span>
        <span class="rmb-pay-r" @click="selectCoinHandle">
          {{ selectCoin.currencyId }}
          <i class="iconfont icon-youtiaozhuanicon"></i>
        </span>
      </p>

      <div class="input-box">
        <input
          :style="
            isFullPayment ? { fontSize: '0.36rem' } : { fontSize: '0.16rem' }
          "
          class="fc-input"
          v-model="fcPrice"
          type="number"
          maxlength="15"
          placeholder="0.00"
          disabled
        />
      </div>
      <div class="balance fz-14">
        <span
          >余额
          <span style="font-weight: bold"
            >{{ $filters.formatMoney(selectCoin.balanceAmount) }}
            {{ selectCoin.currencyId }}</span
          ></span
        >
        <p class="">
          <span @click="switchPayType">{{
            isFullPayment ? '取消全额付款' : '选择全额付款'
          }}</span>
          <i
            v-show="isFullPayment"
            class="iconfont icon-gantanhaoicon"
            @click="showTips"
          ></i>
        </p>
      </div>
      <p class="enough-error" v-if="amountNotEnoughFlag">
        {{ selectCoin.currencyId }}可用余额不足，请重新输入付款金额
      </p>
    </div>
  </div>
  <div class="commission pay-common" v-if="extraInfoShow">
    <div class="commission-tips">
      手续费（费率
      <span
        v-if="
          exchangeInfo.chargeInfo &&
          exchangeInfo.chargeInfo.withdrawDiscountRate
        "
        >{{
          $filters.formatNumber(
            exchangeInfo.chargeInfo.withdrawDiscountRate * 100
          )
        }}</span
      >%）
    </div>
    <div class="commission-r">
      {{ exchangeInfo.origServiceChargeAmount }}CNY
    </div>
  </div>
  <div class="coupon pay-common" v-if="extraInfoShow" @click="hanldeShowCoupon">
    <div class="coupon-t">
      <span class="coupon-t-t">优惠券</span>
      <div class="coupon-t-r">
        <span :style="{ color: !couponList.length ? '#999' : '#F41D1D' }">
          {{
            !couponList.length
              ? '暂无可用优惠券'
              : couponInfo.couponSn
              ? `-${exchangeInfo.serviceChargeDiscountAmount}${exchangeInfo.serviceChargeCurrency}`
              : `有${couponList.length}张可用`
          }}
        </span>
        <i class="iconfont icon-youtiaozhuanicon"></i>
      </div>
    </div>
    <p class="coupon-line"></p>
    <div class="coupon-b" v-if="couponInfo.couponSn">
      <span class="coupon-b-t">优惠后手续费</span>
      <div class="coupon-b-r">
        <span
          >{{ exchangeInfo.serviceChargeAmount
          }}{{ exchangeInfo.serviceChargeCurrency }}</span
        >
      </div>
    </div>
  </div>
  <div v-if="extraInfoShow" class="fee-rate pay-common fz-14">
    <div class="fee-rate-title">
      <p>
        当前汇率牌价: 1{{ selectCoin.currencyId }} =
        {{ exchangeInfo.lockChargeRate.exchangeRate }}CNY
      </p>
      <span @click="handleCalc">刷新</span>
    </div>
    <p class="fee-rate-row">
      汇率更新时间:
      {{ exchangeInfo.lockChargeRate.processTime }}
    </p>
    <p class="fee-rate-row">
      汇率有效倒计时: <span>{{ getRemaining(feeCountDown).symbolTime }}</span>
    </p>
    <div class="fee-rate-row" v-if="rateTips"><span style="font-weight: 700;">温馨提示：</span>{{rateTips}}</div>
  </div>
  <div class="receipt pay-common" v-if="extraInfoShow">
    <span>实际到账金额</span>
    <p>
      {{ $filters.formatMoney(exchangeInfo.realReceiptAmount) || 0
      }}{{ exchangeInfo.realReceiptCurrency }}
    </p>
  </div>

  <div v-if="extraInfoShow" class="phone-box pay-common fz-14">
    <div class="phone-box-title">绑定手机号: {{ accountInfo.mobile }}</div>
    <div class="input-box">
      <i class="iconfont icon-yanzhengmaicon"></i>
      <input v-model="smsCode" maxlength="6" placeholder="输入验证码" />
      <button
        :style="{ color: smsCountDown === 60 ? '#1677ff' : '' }"
        @click="couponSelectProcess"
        :disabled="smsCountDown !== 60"
      >
        {{ smsCountDown === 60 ? '获取验证码' : `${smsCountDown}s后重新获取` }}
      </button>
    </div>
  </div>
  <button class="submit-btn" :disabled="!isSupportPay" @click="hanldeConfirm">
    立即付款
  </button>

  <!-- 选择优惠券 -->
  <Popup
    v-model:show="showCouponPopup"
    position="bottom"
    round
    closeable
    @close="handleClose"
  >
    <div class="popup-title">请选择优惠券</div>
    <div class="select-coupon">
      <div
        v-for="(item, index) in couponList"
        :key="index"
        class="coupon-item"
        @click="handleSelectCoupon(item, index)"
      >
        <div class="coupon-item-tips fz-12">
          {{ item.couponUseType }}
        </div>
        <label>{{ item.type }}</label>
        <div class="coupon-info">
          <div class="coupon-price">
            <p>
              {{ item.ruleShortDesc }}
            </p>
          </div>
          <div class="coupon-desc">
            <p class="fz-14">{{ item.title }}</p>
            <p class="fz-12">{{ item.useDesc }}</p>
          </div>
          <div class="coupon-right">
            <Icon
              :style="{ color: couponIndex === index ? '#005DFF' : '#ccc' }"
              :name="couponIndex === index ? 'checked' : 'circle'"
              size="0.18rem"
            />
          </div>
        </div>
        <div class="coupon-date fz-12">
          有效期: {{ item.startDate }} -
          {{ item.endDate }}
        </div>
      </div>
      <div v-if="disableCoupinList.length" class="disabled-list">
        <div class="disabled-title fz-12">
          <span></span>
          以下暂不能使用
          <span></span>
        </div>
        <div
          v-for="(item, index) in disableCoupinList"
          :key="index"
          class="coupon-item"
        >
          <div class="coupon-item-tips fz-12">
            {{ item.couponUseType }}
          </div>
          <label>{{ item.type }}</label>
          <div class="coupon-info">
            <div class="coupon-price">
              <p>
                {{ item.ruleShortDesc }}
              </p>
            </div>
            <div class="coupon-desc">
              <p class="fz-14">{{ item.title }}</p>
              <p class="fz-12">{{ item.useDesc }}</p>
            </div>
            <div class="coupon-right fz-12">
              <!-- {{ item.temporarilyUsableReason }} -->
              未到使用时间
            </div>
          </div>
          <div class="coupon-date fz-12">
            有效期: {{ item.startDate }} -
            {{ item.endDate }}
          </div>
        </div>
      </div>
    </div>
  </Popup>
  <div v-if="showPwdModalT">
    <sixPwdModal
      :clear="pwdClear"
      :closeModal="() => (showPwdModalT = false)"
      :isShow="showPwdModalT"
      pwdId="supplierPayPwd"
      passGuard="payPassguard"
      :onFinish="onpwdFinish"
    />
  </div>
  <!-- 选择币种框 -->
  <Popup
    v-model:show="showcoinTypePopup"
    position="bottom"
    round
    closeable
    @close="handleClose"
  >
    <div class="popup-title">选择付款币种</div>
    <div class="select-coin">
      <div
        v-for="(item, index) in accountInfo.accountInfoList"
        :key="index"
        class="coin-item"
        v-show="item.balanceAmount"
        @click="switchCoinType(item)"
      >
        <div>
          <p>
            {{ item.currency
            }}{{
              Utility.getLabelByValue(enumDslInfo.CurrencyType, item.currency)
            }}
          </p>
          <span class="fz-12">余额 {{ item.balanceAmount }}</span>
        </div>
        <i
          v-if="selectCoin.currencyId === item.currency"
          class="iconfont icon-duigou"
        ></i>
      </div>
    </div>
  </Popup>
</template>

<style scoped lang="scss">
.pay-common {
  font-size: 0.14rem;
  border-radius: 0.08rem;
  background: #fff;
  margin: 0.1rem 0.12rem;
}
.collection-account {
  padding: 0.12rem;
  font-size: 0.14rem;
  .col-ac-t {
    font-weight: 500;
    color: #222222;
  }
  .col-ac-c {
    width: 100%;
    border-bottom: 1px solid #eee;
    margin-top: 0.1rem;
    font-weight: 400;
    color: #999999;
  }
  .col-ac-b {
    margin-top: 0.19rem;
    font-weight: 400;
    color: #222;
  }
}
.withdraw-price {
  padding: 0.12rem;
  font-size: 0.14rem;
  .type-pay,
  .rmb-pay,
  .other-pay {
    .rmb-pay-t {
      font-weight: 500;
      color: #222222;
    }
    .fc-pay-t {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .rmb-pay-r {
        font-weight: 600;
        color: #222222;
        font-size: 0.16rem;
      }
    }
    .input-box {
      position: relative;
      font-weight: 400;
      color: #999999;
      // height: 0.18rem;
      width: 100%;
      input {
        background-color: #fff;
        border: none;
        border-bottom: 0.01rem #ccc solid;
        width: 100%;
      }
      .rmb-input {
        height: 0.42rem;
        font-weight: bold;
        font-size: 0.36rem;
        color: #222222;
      }
      .fc-input {
        font-weight: bolder;
        color: #999999;
        font-size: 0.18rem;
        font-weight: 500;
      }
      .rmb-pay-r {
        position: absolute;
        right: 0;
        font-size: 0.16rem;
        font-weight: 500;
        color: #222222;
        top: 50%;
        transform: translate(0, -50%);
      }
      i {
        color: #cccccc;
      }
    }
  }
  .type-pay {
    height: 0.56rem;
    padding: 0 0.02rem;
    align-items: center;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.1rem;
    &-r {
      font-weight: 500;
      color: #999999;
      font-size: 0.14rem;
    }
  }
  .other-pay {
    margin-top: 0.12rem;
  }
  .balance {
    @include fh;
    justify-content: space-between;
    margin-top: 0.1rem;
    // border-top: 1px solid #eee;
    span {
      color: #999999;
    }
    p {
      span {
        color: #3f84f3;
      }
    }
  }
  .enough-error {
    font-size: 0.12rem;
    font-weight: 400;
    color: #f41d1d;
    margin-top: 0.12rem;
  }
}

.commission {
  font-size: 0.14rem;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  padding: 0.12rem;
}
.coupon {
  padding: 0.12rem 0.1rem;
  &-t,
  &-b {
    display: flex;
    justify-content: space-between;
    &-t {
      font-weight: 500;
    }
    &-r {
      font-weight: 400;
      color: #f41d1d;
      i {
        color: #cccccc;
      }
    }
  }
  &-line {
    width: 100%;
    height: 1px;
    background-color: #eee;
    margin: 0.18rem 0;
  }
  &-b {
    &-r {
      font-weight: 400;
      font-weight: 500;
      color: #222222;
    }
  }
}
.fee-rate {
  background: #fff;
  padding: 0.12rem;
  &-title {
    @include fh;
    justify-content: space-between;
    margin-bottom: 0.1rem;
    p {
      color: #222;
      font-weight: 500;
    }
    span {
      color: #1677ff;
    }
  }
  &-row {
    color: #999999;
    line-height: 0.2rem;
    span {
      color: #222222;
    }
  }
}
.receipt {
  font-size: 0.14rem;
  font-weight: 500;
  padding: 0.12rem;
  display: flex;
  justify-content: space-between;
}
.phone-box {
  padding: 0.12rem;
  &-title {
    font-weight: 500;
    margin-bottom: 0.1rem;
  }
  .input-box {
    @include fh;
    font-weight: 500;
    height: 0.48rem;
    border-bottom: 1px solid #eee;
    i {
      color: #ccc;
    }
    input {
      width: 2rem;
      flex: 1;
      height: 100%;
      border: none;
      margin: 0 0.04rem;
    }
    button {
      font-weight: 400;
      color: #999999;
      border: none;
      background: inherit;
    }
  }
}

.submit-btn {
  display: block;
  @include wh(3.1rem, 0.48rem);
  border-radius: 0.24rem;
  margin: 0.5rem auto 0.1rem;
  border: none;
  color: #fff;
  background: #3f84f3;
}
.submit-btn:disabled {
  background: #cccccc;
}

.popup-title {
  text-align: center;
  padding: 0.14rem 0;
}
.select-coin {
  max-height: 4.5rem;
  overflow: auto;
  padding: 0.12rem;
  .coin-item {
    @include fh;
    justify-content: space-between;
    height: 0.6rem;
    border-bottom: 1px solid #eee;
    i {
      color: #3a88f7;
    }
    .coin-item-r {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
.select-coupon {
  background: #f7f8fa;
  max-height: 4.5rem;
  overflow: auto;
  padding: 0.12rem;
  .coupon-item {
    padding: 0.25rem 0.13rem 0;
    background: #fff9f8;
    border: 1px solid #e02020;
    width: 3.5rem;
    height: 1.2rem;
    border-radius: 0.08rem;
    margin-bottom: 0.1rem;
    display: flex;
    flex-direction: column;
    position: relative;
    &-tips {
      position: absolute;
      width: 0.96rem;
      text-align: center;
      left: 0.13rem;
      top: 0.65rem;
      color: #212121;
    }
    label {
      position: absolute;
      left: 0;
      top: 0;
      width: 0.68rem;
      height: 0.22rem;
      line-height: 0.22rem;
      text-align: center;
      background: rgba(240, 0, 0, 0.14);
      border-radius: 0.08rem 0px 0.08rem 0px;
      color: #fb0000;
      font-size: 0.1rem;
      font-weight: normal;
    }
    .coupon-info {
      display: flex;
      align-items: center;
      .coupon-price {
        width: 0.96rem;
        text-align: center;
        p {
          color: #f30000;
          font-size: 0.24rem;
          font-weight: 600;
          span {
            font-size: 0.18rem;
          }
        }
      }
      .coupon-desc {
        width: 1.5rem;
        p:nth-of-type(1) {
          font-family: PingFangSC-Medium, PingFang SC;
          color: #212121;
          margin-bottom: 0.09rem;
        }
        p:nth-of-type(2) {
          color: #999;
        }
      }
      .coupon-right {
        text-align: right;
        margin-left: auto;
        flex: 1;
        color: #999;
      }
    }
    .coupon-date {
      height: 0.27rem;
      margin-top: auto;
      color: #999;
      display: flex;
      align-items: center;
      border-top: 1px dashed #e02020;
    }
  }
}
.disabled-list {
  .disabled-title {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    margin: 0.15rem 0;
    span {
      width: 0.3rem;
      height: 1px;
      background: #ddd;
      margin: 0 0.08rem;
    }
  }
}
:deep {
  .icon-gantanhaoicon {
    color: #999;
  }
}
</style>
